<html>
    <!-- by 小傻羊驼 lyh -->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <style type="text/css">
        #bricks{
            width: 30;
            height: 30;
            background-color: brown;
            position: absolute;
            top:300;
            left:0;
        }
        .tline{
            width: 2;
            height: 2;
            background-color: darkblue;
            position:absolute;
        }
        #ab{
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="o" class="ab"> 

    </div>
    <div style="overflow: scroll;" class="ab">
        <h2>左边输入仰角，0-90度，右边输入初速度，如果方块出界可查看console的坐标</h2>
        <input type="text" id="ii">
        <input id="speed">
        <input type="submit" value="点击确认" onclick="setk()">
        <label for="ifshow">显示轨迹<input type="checkbox" onclick="showline=showline?false:true;"id="ifshow"></label>
        <div id="bricks"></div>
        <input type="submit" value="点击擦除轨迹" onclick="delline();">
        <input type="submit" value="开始/结束" onclick="running = running?false:true;get(0);">
        <span id="showpos">(0,0)</span>
    </div>

</body>
<script>
    var running = false;
    var a = 0;
    var b = 0;
    var doc = document.getElementById("bricks");
    var showline=false;
    function setk(){//新参数导入
        setting(window.document.getElementById("ii").value,window.document.getElementById("speed").value)
        }
    function setting(ii,speed){//设置参数
        var g = 10;//重力加速度
        var h = 0;//初始高度
        var i = ii/180*Math.PI;//仰角
        var v = speed;//速度
        var vartical = v*Math.sin(i);//垂直速度
        var horizental = v*Math.cos(i);//水平速度
        //三个坐标
        var t1 = [0,h];
        var t2 = [horizental,h+vartical-(g/2)];
        var t3 = [2*horizental,h+2*vartical - 2*g];
        console.log(t1);console.log(t2);console.log(t3);
        //二元一次方程，好难啊,懒得化简
        // var a = (t2[1]-h-(t3[1]-h)/(t3[0]*t3[0]))/
        //         (-t2[0]*t2[0]/t3[0]+t2[0]);
        // var b = (t3[1]-h-a*t3[0]*t3[0])/t3[0];
        // var a  = (t3[1]-h-(t2[1]-h)*t3[0]*t3[0]/(t2[0]*t2[0]))/
        //          (t3[0]-t3[0]*t3[0]/t2[0]);
        //加减消元法
        a = (t2[0]*(t3[1]-h)/t3[0]-t2[1]+h)/(t3[0]*t2[0]-t2[0]*t2[0])
        b = (t3[1]-h-a*t3[0]*t3[0])/t3[0];
        console.log(a+" "+b);
        }
    function get(times){//开始计算
        var tyy = a*times*times + b*times;
        if(showline &&times%5 ==0){
            document.getElementById("o").innerHTML+=
            "<div class=\"tline\" style=\"left:"+(times+15)+";top:"+(300-tyy+15)+"\"></div>";
        }
        console.log("("+times+","+tyy+")");
        document.getElementById("showpos").innerHTML = "("+times+","+tyy+")";
        doc.style.left = times;
        doc.style.top = 300-tyy;
        if(tyy>-1&&running){
            setTimeout("get("+(times+1)+")",3)
            }else{//结束代码
            doc.top=300;
            doc.left=0;
            return;
            }
    }
    function delline(){//擦地板
        var df = document.getElementById("o");
        var ds = document.getElementsByClassName("tline");
        for(var n = 0;n<ds.length;n++){
            df.removeChild(ds[n]);
        }
        if(document.getElementsByClassName("tline").length>0){
            delline();//擦不干净就递归
        }
    }
    setting(60,100);
</script>
</html>